<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>购物列表</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<style>
		.mui-icon-left-nav {
			color: #60C68B;
		}
		.mui-content{
			background: #fff;
		}
		.goodslist{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 4px;
		}
		.goods-item {
			width:49%;
			border:1px solid #ccc;
			box-shadow:0 0 8px #ccc;
			margin:4px 0;
			padding:2px;
			display:flex;
			flex-direction:column;
			justify-content:space-between;
			min-height:293px;
		}
		.goods-item img {
			width:100%;
		}
		.goods-item  .title {
			font-size:14px;
		}
		.goods-item .info {
			padding-top:2px;
			border-top: 1px dashed #ccc;
			background:#fff;
		}
		.goods-item    p {
			margin:0;
			padding:5px;
		}
		.goods-item .price{
			text-align: center;
		}
		.goods-item  .price .now {
			color:red;
			font-weight:bold;
			font-size:16px;
		}
		.goods-item .sell {
			text-align: center;
		}
		.goods-item .sell button{
			margin: 0 auto;
			width: 80%;
		}
		.text-center{
			padding: 20px 0;
			text-align: center;
		}
		[v-cloak] {
			display: none;
		}
		</style>
		<script src="../../js/mui.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/vue-resource.js"></script>
	</head>

	<body>
		<div id="app" class="shop_app" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">售卖机</h1>
			</header>
			<div class="mui-content" v-if="show_hide">
				<div class="goodslist">
					<div class="goods-item" v-for="item in goodslist" :key="item.id">
						<img :src="item.img_url" :alt="item.title">
						<h2 class="title">{{item.title}}</h2>
						<div class="info">
							<p class="price">
								<span class="now">￥{{item.sell_price}}</span>
							</p>
							<p class="sell">
								<button>购买</button>
							</p>
						</div>
					</div>
				</div>
				<p class="text-center"><button type="button" class="mui-btn mui-btn-danger" @click="getMore">加载更多</button></p>

			</div>
		</div>



		<script type="text/javascript">
			mui.init({
			  pullRefresh : {
				container:".shop_app",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				down : {
				  style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
				  color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
				  height:'50px',//可选,默认50px.下拉刷新控件的高度,
				  range:'100px', //可选 默认100px,控件可下拉拖拽的范围
				  offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
				  auto: false,//可选,默认false.首次加载自动上拉刷新一次
				  callback :function(){
					  window.location.reload();
					  
				  } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				}
			  }
			});
			mui.plusReady(function() {
				var app = new Vue({
					el: "#app",
					data: {
						show_hide:false,
						pageindex: 1, //分页的页数
						goodslist: [] //存放商品列表的数据
					},
					methods: {
						getgoodslist() {
							//获取商品列表
							this.$http.get('http://www.liulongbin.top:3005/api/getgoods?pageindex=' + this.pageindex, {
									//参数
								}, {
									emulateJSON: true
								})
								.then(res => {
									if (res.data.status === 0) {
										this.show_hide=true;
										// this.goodslist=res.data.message
										this.goodslist = this.goodslist.concat(res.data.message);
									} else {
										Toast('接口状态错误')
									}
								})
								.catch(res => {
									mui.toast('获取商品列表数据接口失败')
								})
						},
						getMore() {
							//查看更多
							this.pageindex++;
							this.getgoodslist();
						},
					},
					created() {
						this.getgoodslist();
					}
				})
			});
		</script>
	</body>

</html>
